<template>
  <div>
    <CommonCard title="累计用户数" :count="usersTotal">
      <template #main>
        <!-- autoresize让其变为响应式 -->
        <v-chart :option="getOption()" autoresize></v-chart>
      </template>
      <template #bottom>
        <div class="bottom">
        <!-- 写html时候尽量用div标签，因为是块级元素好修改样式 -->
        <div class="item">
          <!-- 这里需要用三个div标签 -->
          <div>日同比</div>
          <!-- 数据 -->
          <div class="count">{{userGrowthLastDay}}</div>
          <!-- 上下箭头-->
          <div :class="{up:Number(userGrowthLastDay)>0,down:Number(userGrowthLastDay)<0 }"></div>
        </div>

        <div class="item">
          <div>月同比</div>
          <div class="count">{{userGrowthLastMonth}}</div>
          <div :class="{up:Number(userGrowthLastMonth)>0,down:Number(userGrowthLastMonth)<0}"></div>
        </div>
      </div>
      </template>
    </CommonCard>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'TotalUser',
})
</script>

<script lang="ts" setup>
import { useEchartsStore } from '@/stores/echarts'
import { computed } from 'vue'

// "usersTotal": 1177965, 用户总数
// "usersLastDay": 1000000,昨天的用户数
// "usersLastMonth": 800000,上个月的用户数
// "userGrowthLastDay": "17.70",
// "userGrowthLastMonth": "47.12",
let echartsStore = useEchartsStore()

const usersTotal = computed(() => {
  return echartsStore.echartsData.usersTotal
})
const usersLastDay = computed(() => {
  return echartsStore.echartsData.usersLastDay
})
const usersLastMonth = computed(() => {
  return echartsStore.echartsData.usersLastMonth
})
const userGrowthLastDay = computed(() => {
  return echartsStore.echartsData.userGrowthLastDay
})
const userGrowthLastMonth = computed(() => {
  return echartsStore.echartsData.userGrowthLastMonth
})

function getOption(){
  return{
    grid:{
    left:0,
    right:0,
    top:0,
    bottom:0
    },
    tooltip:{
      trigger:'axis'
    },
    // x轴类目轴变成数值轴，y轴变成数值轴变成类目轴
    xAxis:{
      type:'value',
      min:0,
      max:usersTotal.value,
      show:false
    },
    yAxis:{
      type:'category',
      show:false
    },
    series:{
      type:'bar',
      // 因为这里的图表只有一行，所以只能写一个数组，并且里面只能写一个元素
      // 使用日增长量或者月增长量都可以
      data:[usersTotal.value -usersLastMonth.value],
      // 柱状图的宽度
      barWidth:'30%',
      // 柱条颜色
      color:'green',
      // 是否显示柱条的背景色
      showBackground:true,
      // 图形上的文本标签
      label:{
        show:true,
        // 指定要显示的自定义内容，值可以写成一个字符串，也可以写成一个函数 默认间距是5px
        formatter:'|',
        // 距离
        distance:100,
        // 位置
        position:'right',
        
      }
    },
    
  }
}
</script>

<style  scoped>
.bottom{
  display: flex;
  justify-content: space-between;
}
.item{
  display:flex;
  align-items:center;
}
.count{
  margin:0 5px
}
</style>